<template>
  <div class="ebook-bookmark" ref="bookmark">
    <div class="ebook-bookmark-text-wrapper">
      <div class="ebook-bookmark-down-wrapper" ref="iconDown">
        <span class="icon-down"></span>
      </div>
      <div class="ebook-bookmark-text">{{ text }}</div>
    </div>
    <div class="ebook-bookmark-icon-wrapper" :style="isFixed ? fixedStyle : {}">
      <bookmark :color="color" :width="15" :height="35"></bookmark>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import {ebookMixin} from '@/utils/mixin'
import Bookmark from '../common/Bookmark'
import {realPx} from "@/utils/utils";
import {getBookmark, saveBookmark} from "@/utils/localStorage";

const BLUE = '#346cbc'
const WHITE = '#fff'
export default {
  name: "EbookBookMark",
  mixins: [ebookMixin],
  components: {Bookmark},
  data() {
    return {
      text: '',
      color: WHITE,
      isFixed: false
    }
  },
  computed: {
    height() {
      return realPx(35)
    },
    threshold() {
      return realPx(55)
    },
    fixedStyle(){
      return {
        position: 'fixed',
        top: 0,
        right: `${(window.innerWidth - this.$refs.bookmark.clientWidth) / 2}px`
      }
    }
  },
  watch: {
    offsetY(v) {
      if (!this.bookAvailable || this.menuVisible || this.settingVisible >= 0) {
        return
      }
      if (v >= this.height && v < this.threshold) {
        this.beforeThreshold(v)
      } else if (v >= this.threshold) {
        this.afterThreshold(v)
      } else if (v > 0 && v < this.height) {
        this.beforeHeight()
      } else if (v === 0){
        this.restore()
      }
    },
    isBookmark(v){
      if (v){
        this.color = BLUE
        this.isFixed = true
      }else {
        this.color = WHITE
        this.isFixed = false
      }
    }
  },
  methods: {
    addBookmark(){
      this.bookmark = getBookmark(this.fileName)
      if (!this.bookmark){
        this.bookmark = []
      }
      const currentLocation = this.currentBook.rendition.currentLocation()
      const cfibase = currentLocation.start.cfi.replace(/!.*/, '')
      const startcfi = currentLocation.start.cfi.replace(/.*!/, '')
      const endcfi = currentLocation.end.cfi.replace(/.*!/, '')
      const rangecfi = `${cfibase}!,${startcfi},${endcfi})`
    //      获取原文信息
      this.currentBook.getRange(rangecfi).then(res => {
        res = res.toString().replace(/\s\s/g,'')
        this.bookmark.push({
          cfi: currentLocation.start.cfi,
          text: res
        })
        saveBookmark(this.fileName, this.bookmark)
      })

    },
    removeBookmark(){
      this.currentLocation = this.currentBook.rendition.currentLocation()
      this.bookmark = getBookmark(this.fileName)
      const cfi = this.currentLocation.start.cfi
      console.log(this.bookmark)
      if (this.bookmark){
        this.bookmark = this.bookmark.filter(item => item.cfi !== cfi)
        console.log(this.bookmark)
        saveBookmark(this.fileName, this.bookmark)
        this.setIsBookmark(false)
      }

    },
    restore(){
      setTimeout(()=> {
        this.$refs.bookmark.style.top = `${-this.height}px`
        this.$refs.iconDown.style.transform= 'rotate(0deg)'
      },200)
      if (this.isFixed){
        this.setIsBookmark(true)
        this.addBookmark()
      }else {
        this.setIsBookmark(false)
        this.removeBookmark()
      }
    },
    beforeHeight() {
      if (this.isBookmark) {
        this.text = this.$t('book.pulldownDeleteMark')
        this.color = BLUE
        this.isFixed = true
      } else {
        this.text = this.$t('book.pulldownAddMark')
        this.color = WHITE
        this.isFixed = false
      }
    },
    beforeThreshold(v) {
      this.$refs.bookmark.style.top = `${-v}px`
      this.beforeHeight()
      if (this.$refs.iconDown.style.transform === 'rotate(180deg)') {
        this.$refs.iconDown.style.transform = 'rotate(0deg)'
      }
    },
    afterThreshold(v) {
      this.$refs.bookmark.style.top = `${-v}px`
      if (this.isBookmark) {
        this.text = this.$t('book.releaseDeleteMark')
        this.color = WHITE
        this.isFixed = false
      } else {
        this.text = this.$t('book.releaseAddMark')
        this.color = BLUE
        this.isFixed = true
      }
      if (this.$refs.iconDown.style.transform === '' || this.$refs.iconDown.style.transform === 'rotate(0deg)') {
        this.$refs.iconDown.style.transform = 'rotate(180deg)'
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import '~@/assets/styles/global';

.ebook-bookmark {
  width: 100%;
  position: absolute;
  top: px2rem(-35);
  height: px2rem(35);
  left: 0;
  z-index: 200;

  .ebook-bookmark-text-wrapper {
    position: absolute;
    right: px2rem(45);
    bottom: 0;
    display: flex;

    .ebook-bookmark-down-wrapper {
      font-size: px2rem(14);
      color: white;
      transition: all .2s linear;
      @include center;
    }

    .ebook-bookmark-text {
      font-size: px2rem(14);
      color: white;
    }
  }

  .ebook-bookmark-icon-wrapper {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: px2rem(15);
  }
}
</style>
